<template>
	<view>
		<NavBar text='线上问诊'/>
		<view style="width: 100%; height: 80px;"></view>
		<view
			style="background-color: white; width: 100vw; display: flex;justify-content:flex-start;margin-bottom: 10px;">
			<view style="margin-left: 15px;margin-top: 15px;margin-bottom: 10px;">
				<image src="@/static/images/u783.png" mode="" style="width: 74px;height: 72px;"></image>
			</view>
			<view
				style="margin-left: 10px; display: flex;flex-direction: column;justify-content: space-around;margin-top: 15px;margin-bottom: 10px;">
				<view style="display: flex;width: 150px;justify-content: space-between;">
					<h4>张三三</h4>
					<h4>女</h4>
					<h4>23岁</h4>

				</view>

				<view style="color: #afafaf;font-size: 12px;">
					<span>南大街上站小区A座102</span>
				</view>
			</view>
			<p
				style="font-size: 12px;background-color: #33ccff;color: #fff; height: 15px;border-radius: 5px;margin-top: 28px;margin-left: 5px;">
				孕产妇人群</p>

		</view>
		<view style="background-color: #fff;margin-bottom: 10px;">
			<p style="border-bottom: 1px solid #ececec;padding-left: 15px;height: 30px;line-height: 30px;
				margin-bottom:10px ;   font-size:14px;">症状</p>
			<textarea placeholder="请输入您的症状" v-model="zztext"
				style="color: #2266ff;padding: 15px;font-size: 14px;border-bottom: 1px solid #ccc;width: 100vw;" />
			<p style="padding-left:15px;padding-bottom: 10px;margin-top: 10px;">图片资料</p>
			<view
				style="width: 272px;display: flex;justify-content: space-between;margin-left: 20px;padding-bottom: 10px;">
				<image src="@/static/images/zixun1.png" mode="" style="width: 79px;height: 83px;"></image>
				<image src="@/static/images/zixun2.png" mode="" style="width: 79px;height: 83px;"></image>
				<image src="@/static/images/zixun3.png" mode="" style="width: 79px;height: 83px;"></image>
			</view>
		</view>
		<view
			style="background-color: #fff; width: 100vw;height: 40px;display: flex;justify-content: space-between;margin-bottom: 10px;">
			<p style=" padding-left: 15px;line-height: 40px;
				margin-bottom:10px ;   font-size:14px;">历史回复</p>
			<u-icon name='arrow-right' size="30rpx"></u-icon>
		</view>
		<view
			style="background-color: #fff; width: 100vw;margin-bottom: 10px;">
			<p style="border-bottom: 1px solid #ececec;padding-left: 15px;height: 30px;line-height: 30px;
				margin-bottom:10px ;   font-size:14px;">回复</p>
			<view class="textarea_box">
				<textarea class="textarea" placeholder-style="font-size:28rpx" maxlength="200" @input="descInput" v-model="desc" />
				<view class="num">{{ desc.length }}/200</view>
			</view> 
			<button style="width: 90vw;height: 40px; background-color: #ff9900;color: #fff;border-radius: 25px;margin-top: 20px;margin-bottom: 20px;">确定</button>
		</view>
	</view>
	</view>
</template>

<script>
	import NavBar from '@/components/NarBar.vue'
	export default {
		components: {
			NavBar
		},
		data() {
			return {
				desc: '',
				zztext:'我嗓子疼，目前怀孕32+，可以吃药吗?'
			};
		},
		onLoad(params) {
			let array = JSON.parse(params.datas)
			this.zztext = array.text
			console.log(array);
		},
		methods: {
			descInput(e) {
				console.log(e.detail.value.length);
			},
			back(){
				uni.navigateBack({ delta: 1 })
			},
			gotodetail(){
				uni.switchTab({ url: '/pages/doctor-serve/detail' })
			}
		}
	}
</script>

<style lang="scss">
	page{
		background-color: #f2f2f2;
	}
.textarea_box{
	padding: 20rpx;
	width: 90%;
	margin-left: 10px;
	background-color: #fff;
	border: 1px solid #8f8f9d;
	// width: 300px;
	// margin-left: 30px;
	/deep/ .uni-textarea-textarea{
		font-size: 28rpx;
		line-height: 45rpx;
	}
	.num{
		text-align: right;
		color: gray
	}
}
</style>